import React, { useState,useEffect } from 'react';
import { Button, Form, Input, Select,message } from 'antd';

import { useNavigate} from 'react-router-dom'
import { role_list,staff_add } from '../utils/api';
function Register(props) {

    var navigate=useNavigate()
    var [Rolelist, setRolelist] = useState([])

    useEffect(() => {
        role_list().then((res) => {
            console.log(res);
            setRolelist(res.data.list)
        })
    }, [])

    var onFinish = (values) => {
        console.log('Received ', values);
        staff_add(values).then((res)=>{
            if(res.data.code==200){
                message.success('注册成功');
                navigate('/login')
            }else{
                message.error('注册失败');
            }
        })

    };
    return (
        <div className='register'>
            <div className="register-box">
                <h2>REGISTER</h2>
                <Form name="normal_login" onFinish={onFinish}>
                    <Form.Item
                        name="user"
                        rules={[
                            {
                                required: true,
                                message: '请输入账号!',
                            },
                        ]}
                    >
                        <Input placeholder="账号" />
                    </Form.Item>

                    <Form.Item
                        name="nickname"
                        rules={[
                            {
                                required: true,
                                message: '请输入昵称!',
                            },
                        ]}
                    >
                        <Input placeholder="昵称" />
                    </Form.Item>

                    <Form.Item
                        name="name"
                        rules={[
                            {
                                required: true,
                                message: '请输入姓名!',
                            },
                        ]}
                    >
                        <Input placeholder="姓名" />
                    </Form.Item>

                    <Form.Item
                        name="phone"
                        rules={[
                            {

                                required: true,
                                message: '请输入手机号!',
                            },
                        ]}
                    >
                        <Input placeholder="手机号" />
                    </Form.Item>

                    <Form.Item
                        name="role"
                        rules={[
                            {

                                required: true,
                                message: '请选择角色!',
                            },
                        ]}
                    >
                        <Select placeholder="请选择角色!">
                            {
                                Rolelist.map((item, index) => {
                                    return (
                                        <Select.Option key={index} value={item._id}>{item.name}</Select.Option>
                                    )
                                })
                            }
                        </Select>
                    </Form.Item>

                    <Form.Item>
                        <Button  block type="primary" htmlType="submit"  shape="round">
                            注册
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
}

export default Register;